<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>starter</title>
</head>
	<style type="text/css">
		.canvas {
			margin: 50px auto;
			border: 1px solid #393939;
			display: block;
		}
	
	</style>
<body>
	<canvas class="canvas" id="canvas">
		当前浏览器不支持Canvas，请更换浏览器再试。
	</canvas>
</body>
	<script type="text/javascript" src="canvas-extends.js"></script>
	<script type="text/javascript">
	var WINDOW_WIDTH = 1024;
	var WINDOW_HEIGHT = 600;
	window.onload = function(){

		var canvas = document.getElementById("canvas");
		canvas.width = WINDOW_WIDTH;
		canvas.height = WINDOW_HEIGHT;
		var context = canvas.getContext("2d");
        context.fillSky(0,0,WINDOW_WIDTH,WINDOW_HEIGHT);
		for(var  i = 0 ;i < 200 ; i++){	
			var R = Math.random() * 5 + 5;
			var x = Math.random() * WINDOW_WIDTH;
			var y = Math.random() * WINDOW_HEIGHT * 0.65;
			var a = Math.random() * 360;
			var m = Math.random() * 0.6 + 0.4 ;
			context.fillStar(  x, y ,R , m , a);
		}
        context.fillMoon(800,100,20);
		context.fillLand(WINDOW_WIDTH,WINDOW_HEIGHT)

	}
	</script>
</html>

